<template>
  <div class="app-container">
    <div v-if="userInfo">
      <div class="fs-20" style="text-align: center;">
        <span class="c-primary fs-30" style="text-align: right;">{{ userInfo.userName }}</span>
      </div>
      <div class="fs-16">
        <h2>个人基本信息</h2>
        <el-table v-if="userInfo" :data="userInfo">
          <el-table-column label="注册时间">
            <template #default="scope">{{ format(scope.row.createTime, 'yyyy-MM-dd HH:mm:ss') }}</template>
          </el-table-column>
          <el-table-column label="账号" prop="userName"></el-table-column>
          <el-table-column label="昵称" prop="nickName"></el-table-column>
          <el-table-column label="邀请码" prop="userCode"></el-table-column>
          <el-table-column label="手机号" prop="phonenumber"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
                    <el-table-column label="性别" align="center">
                      <template #default="scope">
                        <dict-tag :options="sys_user_sex" :value="scope.row.sex"/>
                      </template>
                    </el-table-column>
        </el-table>
      </div>
      <h2 class="text-center fs-20" style="margin-top: 20px;">总战绩</h2>
      <el-table v-if="statInfo" :data="statInfo">
        <el-table-column label="" prop=""></el-table-column>
        <el-table-column label="" prop=""></el-table-column>
        <el-table-column label="消费" prop="activityCost"></el-table-column>
        <el-table-column label="活动次数" prop="activityNum"></el-table-column>
        <el-table-column label="打水次数" prop="competitionNum"></el-table-column>
        <el-table-column label="奖励" prop="awardCoin"></el-table-column>
        <el-table-column label="打水局数" prop="totalBout"></el-table-column>
        <el-table-column label="胜局" prop="winBout"></el-table-column>
        <el-table-column label="负局" prop="loseBout"></el-table-column>
        <el-table-column label="胜率" prop="winRate"></el-table-column>
        <el-table-column label="净胜" prop="totalScore"></el-table-column>
      </el-table>
      <h2 class="text-center fs-20" style="margin-top: 20px;">加入群列表</h2>
      <el-table v-if="groupList" :data="groupList">
        <el-table-column label="群称" prop="groupName"></el-table-column>
        <el-table-column label="昵称" prop="userName"></el-table-column>
        <el-table-column label="消费" prop="activityCost"></el-table-column>
<!--        <el-table-column label="活动次数" prop="activityNum"></el-table-column>-->
<!--        <el-table-column label="打水次数" prop="competitionNum"></el-table-column>-->
        <el-table-column label="活动次数" class-name="small-padding ">
          <template #default="scope">
            <el-button link type="primary" icon="Link" v-hasPermi="['group:participator:listPage']"
                       @click="skipPage(scope.row,'/group/participator')">
              {{ scope.row.activityNum }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="打水次数" class-name="small-padding ">
          <template #default="scope">
            <el-button link type="primary" icon="Link" v-hasPermi="['group:boutStat:listPage']"
                       @click="skipPage(scope.row,'/group/boutStat')">
              {{ scope.row.competitionNum }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="奖励" prop="awardCoin"></el-table-column>
        <el-table-column label="打水局数" prop="totalBout"></el-table-column>
        <el-table-column label="胜局" prop="winBout"></el-table-column>
        <el-table-column label="负局" prop="loseBout"></el-table-column>
        <el-table-column label="胜率" prop="winRate"></el-table-column>
        <el-table-column label="净胜" prop="totalScore"></el-table-column>
      </el-table>
    </div>

    <pagination
        v-show="pageObj.total>0"
        :total="pageObj.total"
        v-model:page="pageObj.pageNum"
        v-model:limit="pageObj.pageSize"
        @pagination="getGroupList"
    />
  </div>
</template>

<script setup>
import {getUserAllStat} from '@/api/group/ref.js';
import {format} from "date-fns";
import useClipboard from "vue-clipboard3";
import useUserStore from '@/store/modules/user'
import * as refServer from "@/api/group/ref.js";
import {AES_Encrypt} from "@/utils/jsencrypt.js";
const router = useRouter();
const {proxy} = getCurrentInstance();
const {
  sys_user_sex
} = proxy.useDict("sys_user_sex");
const {toClipboard} = useClipboard()
const userInfo = ref([])
userInfo.value.push(useUserStore().user)
const loading = ref(true);
const statInfo = ref([])
const groupList = ref([])
const pageObj = reactive({pageNum: 1, pageSize: 20, total: 0})
function skipPage(row, path) {
  router.push({path: path, query: {userGroupRefId: AES_Encrypt(row.id), groupId: AES_Encrypt(row.groupId)}});
}
// 获取总积分详情
const getAllStat = () => {
  getUserAllStat().then(res => {
    if (res) {
      statInfo.value.push(res.data);
    }
  })
}
// 获取用户所在群列表
const getGroupList = () => {
  refServer.listRef({
    pageSize: pageObj.pageSize,
    pageNum: pageObj.pageNum,
    orderByColumn: 'id',
    isAsc: 'desc',
    ownerFlag: true,
  }).then(res => {
    if (res) {
      groupList.value = res.data.list;
      pageObj.total = res.data.total;
      pageObj.pageNum = res.data.pageNum;
    }
  })
}
const copy = (txt) => {
  toClipboard(txt).then(() => {
    // showToast('复制成功')
  })
}
getAllStat()
getGroupList()
</script>

<style scoped lang="scss">
</style>

